<template>
	<view class="bg">
		<view v-for="(item, index) in dataArr" :key="index">
			<view class="sub_title_sm">详情</view>
			<view class="info">
				<view class="info_item info_item_header">
					<view>地块名称</view>
					<view>{{ name }}</view>
				</view>
				<view class="info_item">
					<view>计划征地总面积</view>
					<view>{{ item.planLandArea }}（亩）</view>
				</view>
				<view class="info_item">
					<view>年计划征地总面积</view>
					<view>{{ item.yearPlanLandArea }}（亩）</view>
				</view>
				<view class="info_item">
					<view>征地总面积</view>
					<view>{{ item.landAreaTotal }}（亩）</view>
				</view>
				<view class="info_item">
					<view>年征地总面积</view>
					<view>{{ item.yearLandAreaTotal }}（亩）</view>
				</view>
				<view class="info_item">
					<view>计划拆迁总面积</view>
					<view>{{ item.planRemoveArea }}（m²）</view>
				</view>
				<view class="info_item">
					<view>年计划拆迁总面积</view>
					<view>{{ item.yearPlanRemoveArea }}（m²）</view>
				</view>
				<view class="info_item">
					<view>拆迁总面积</view>
					<view>{{ item.removeAreaTotal }}（m²）</view>
				</view>
				<view class="info_item">
					<view>年拆迁总面积</view>
					<view>{{ item.yearRemoveAreaTotal }}（m²）</view>
				</view>
				<view class="info_item">
					<view>填报时间</view>
					<view>{{ item.dataTime }}</view>
				</view>
			</view>
			<view class="sub_title_sm">进度情况</view>
			<view class="info info2">
				{{item.imageProgress}}
			</view>
			<view class="sub_title_sm">下一步计划</view>
			<view class="info info2">
				{{item.nextPlan}}
			</view>
			<view class="sub_title_sm">存在问题</view>
			<view class="info info2">
				{{item.problems}}
			</view>
		</view>
	</view>
</template>

<script>
	import {
		xmglChilrenJdxx
	} from "@/request/zdxm.js"
	export default {
		data() {
			return {
				id: null,
				name: '',
				dataArr: [],
			};
		},
		onLoad(option) {
			this.id = option.id
			this.name = option.name
			this.xmglChilrenJdxx()
		},
		onReady() {},
		methods: {
			xmglChilrenJdxx() {
				xmglChilrenJdxx({
						id: this.id
					})
					.then((res) => {
						this.dataArr = res.data.result.details
					})
			},
			toLsjl() {
				uni.navigateTo({
					url: "/pages/zdxm/xmgl/xq/xqlsjl",
				});
			},
			toJdsb() {
				uni.navigateTo({
					url: "/pages/zdxm/xmgl/xq/xqjztb",
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	// .xqlsjl {
	// 	padding-top: 24rpx;
	// 	background-color: #f6f7fa;
	// 	min-height: 100vh;

	.info {
		width: 710rpx;
		margin: 0 auto;
		background: #ffffff;
		box-shadow: 0rpx 0rpx 24rpx 0rpx rgba(48, 116, 255, 0.1);
		border-radius: 8rpx;
		padding: 0 24rpx;
		margin-bottom: 20rpx;
		.info_item {
			display: flex;
			flex-flow: row nowrap;
			justify-content: flex-start;
			align-items: flex-start;
			padding: 16rpx 0;

			view:nth-child(1) {
				width: 210rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #8e9cb3;
			}

			view:nth-child(2) {
				flex: 1;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #272b32;
				margin-left: 20rpx;
			}
		}

		.info_item_header {
			height: 100rpx;
			line-height: 100rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #272b32;
			border-bottom: 1rpx solid rgba(231, 233, 240, 1);
			padding: 0;

			view:nth-child(2) {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #272b32;
			}
		}
	}

	// .sub_title {
	// 	height: 95rpx;
	// 	line-height: 95rpx;
	// 	font-size: 28rpx;
	// 	font-family: PingFang SC;
	// 	font-weight: bold;
	// 	color: #272b32;
	// 	padding-left: 26rpx;
	// }

	.info2 {
		padding: 37rpx 31rpx;
	}

	.info2:last-child {
		margin-top: 40rpx;
	}

	// }
</style>
